// 封装自定义指令
import Vue from 'vue'

// 引入图片资源
import img from '@/assets/common/head.jpg'
// 通过自定义指令来处理图片异常
Vue.directive('fiximg', {
  inserted(el) {
    // 给使用到的dom元素绑定一个错误事件
    // 当图片加载不出来，手动改图片路径
    el.addEventListener('error', () => {
      // 这里放 @ 字符串也只会当做普通字符串来解析, 并不会作为文件进行加载
      // el.src = '@/assets/common/head.jpg'
      el.src = img
    })

    // 当图片加载不报错，即src为空或者为null
    el.src = el.src || img
  }
})
